<template>

  <NuxtLayout name="www-layout">
    <template #main>
      <div class="min-h-dvh">
        <div class="hero min-h-min mt-8">
          <div class="hero-content flex-col lg:flex-row-reverse min-w-full">
            <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
              <div class="card-body">
                <div class="w-full">
                  <div class="flex justify-center">
                    <span class="font-semibold">账号注册</span>
                  </div>
                  <div class="flex justify-end">
                    <img src="../assets/json/login-welcome.jpeg" width="42">
                  </div>
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text"></span>
                  </label>
                  <input type="file" class="file-input file-input-bordered w-full max-w-xs hidden"
                         ref="fileInput" @change="handleFileChange" />
                  <div class="avatar flex justify-center tooltip cursor-pointer" data-tip="点击上传头像">
                    <div class="mask mask-squircle w-24" v-if="headImgUrl">
                      <img @click="triggerFileUpload" :src="headImgUrl" />
                    </div>
                    <div class="avatar placeholder mask mask-squircle w-24" v-else>
                      <div class="bg-neutral text-neutral-content w-24 rounded-full ring opacity-80" @click="triggerFileUpload">
                        <span class="text-md">头像</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text">账号</span>
                  </label>
                  <input type="text" placeholder="请输入账号" v-model="form.account" class="input input-bordered"/>
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">昵称</span>
                  </label>
                  <input type="text" placeholder="请输入昵称" v-model="form.name" class="input input-bordered"/>
                </div>
                <div class="form-control">
                  <label class="label justify-start">
                <span class="label-text font-semibold">
                  手机号
                </span>
                    <div class="lg:tooltip" data-tip="可找回密码">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
                      </svg>
                    </div>
                  </label>
                  <input type="text" placeholder="请输入手机号" v-model="form.cellphoneNumber" class="input input-bordered"/>
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">密码</span>
                  </label>
                  <input type="password" placeholder="请输入密码" v-model="form.password" class="input input-bordered"/>
                </div>
                <div class="form-control mt-6">
                  <button class="btn btn-primary" @keydown.enter="doSubmit()" @click="doSubmit()">注册</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </NuxtLayout>

</template>

<script setup>
import {httpPost, postForm} from "../utils/http/http-helper.js";
import {notificationError, notificationSuccess} from "../utils/notification/index.js";

const router = useRouter()

const form = ref({
  account: '',
  name: '',
  cellphoneNumber: '',
  password: '',
  role: '2',
  headImgKey: '',
})

// 头像图片地址
const headImgUrl = ref('')


const fileInput = ref()
function triggerFileUpload() {
  fileInput.value.click(); // 模拟用户点击文件输入
}
// 处理文件改变
function handleFileChange(event) {
  const file = event.target.files[0]; // 获取文件
  if (file) {
    // 执行文件上传操作
    uploadFile(file);
  }
}
// 上传文件的方法
function uploadFile(file) {
  // 这里可以添加上传文件的逻辑，比如使用 FormData 发送请求等
  console.log('Uploading file...', file);
  // 上传文件的代码...

  const formData = new FormData();
  // const file = rawFile.file;
  const filename = file.name
  if(!filename.endsWith(".png")
      && !filename.endsWith(".PNG")
      && !filename.endsWith(".jpg")
      && !filename.endsWith(".JPG")
      && !filename.endsWith(".jpeg")
      && !filename.endsWith(".JPEG")){
    notificationError('请上传图片')
    return
  }
  formData.append('file', file);
  postForm('/api/files', formData).then(resp => {
    if (resp.success) {
      const data = resp.data
      form.value.headImgKey = data.compressKey
      headImgUrl.value = data.compressLocation

      console.log('上传文件...')
      console.log(data)
      console.log('上传文件...')

      notificationSuccess('上传头像成功')
    }
  }).catch(err => {
    console.log('err -> ' + err)
    notificationError(err)
  })
}

/**
 * 注册表单提交
 */
function doSubmit() {
  console.log(form.value)
  httpPost('/api/auth/register', form.value).then(resp => {
    console.log(resp)
    if (!resp.success) {
      notificationError(resp.msg)
      return
    }
    notificationSuccess('恭喜，注册成功！即将跳转到登录页。')
    // 单位是毫秒 这里是指1秒后执行 跳转到登录页面
    setTimeout(() => {
      router.push('/login')
    }, 1000)
  })
}
</script>

<style scoped>

</style>